<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="Dashboard">
  <meta name="keyword" content="Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
  <title>Dashio - Bootstrap Admin Template</title>
  <!-- Favicons -->
  <link href="${pageContext.request.contextPath }/img/favicon.png" rel="icon">
  <link href="${pageContext.request.contextPath }/img/apple-touch-icon.png" rel="apple-touch-icon">
  <!-- Bootstrap core CSS -->
  <link href="${pageContext.request.contextPath }/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <!--external css-->
  <link href="${pageContext.request.contextPath }/lib/font-awesome/css/font-awesome.css" rel="stylesheet" />
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/zabuto_calendar.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/lib/gritter/css/jquery.gritter.css" />
  <!-- Custom styles for this template -->
  <link href="${pageContext.request.contextPath }/css/style.css" rel="stylesheet">
  <link href="${pageContext.request.contextPath }/css/style-responsive.css" rel="stylesheet">
  <script src="${pageContext.request.contextPath }/lib/chart-master/Chart.js"></script>

  <!-- =======================================================
    Template Name: Dashio
    Template URL: https://templatemag.com/dashio-bootstrap-admin-template/
    Author: TemplateMag.com
    License: https://templatemag.com/license/
  ======================================================= -->
</head>

<body>
  <section id="container">
    <!-- **********************************************************************************************************************************************************
        TOP BAR CONTENT & NOTIFICATIONS
        *********************************************************************************************************************************************************** -->
    <!--header start-->
    <header class="header black-bg">
      <div class="sidebar-toggle-box">
        <div class="fa fa-bars tooltips" data-placement="right" data-original-title="Toggle Navigation"></div>
      </div>
      <!--logo start-->
      <a href="index.jsp" class="logo"><b>BES<span>Manage</span></b></a>
      <!--logo end-->
    
      <div class="top-menu">
        <ul class="nav pull-right top-menu">
           <li><a class="logout" href="${pageContext.request.contextPath }/UserController?op=exit">退出登录</a></li>
        </ul>
      </div>
    </header>
    <!--header end-->
    <!-- **********************************************************************************************************************************************************
        MAIN SIDEBAR MENU
        *********************************************************************************************************************************************************** -->
    <!--sidebar start-->
    <aside>
      <div id="sidebar" class="nav-collapse ">
        <!-- sidebar menu start-->
        <ul class="sidebar-menu" id="nav-accordion">
        	<p class="centered"><a href="index.jsp">
        	<!--管理员头像-->
          <!-- 默认头像 -->
			<c:if test="${sessionScope.backUser.u_img ==null}">
				<img  src="${pageContext.request.contextPath }/images/ui-sam.jpg" class="img-circle" width="80" />
			</c:if>
			<!-- 自定义头像 -->
			<c:if test="${sessionScope.backUser.u_img !=null}">
				<img  src="${pageContext.request.contextPath }/DownloadServlet?fileName=${sessionScope.backUser.u_img}"  class="img-circle" width="80" />
			</c:if>
          </a></p>
          <!--管理员名-->
          <h5 class="centered">${sessionScope.backUser.u_name}</h5>
          <li class="mt">
            <a href="${pageContext.request.contextPath }/back/index.jsp">
              <i class="fa fa-dashboard"></i>
              <span>公司信息</span>
              </a>
          </li>
          <li class="sub-menu">
            <a href="javascript:;">
              <i class="fa fa-desktop"></i>
              <span>用户管理</span>
              </a>
            <ul class="sub">
              <li><a href="${pageContext.request.contextPath }/back/user-information.jsp">用户信息</a></li>
              <li><a href="${pageContext.request.contextPath }/back/adduser.jsp">添加用户</a></li>
            </ul>
          </li>
          <li class="sub-menu">
            <a href="javascript:;">
              <i class="fa fa-tasks"></i>
              <span>车次管理</span>
              </a>
            <ul class="sub">
              <li><a href="${pageContext.request.contextPath }/back/bus-information.jsp">车次信息</a></li>
              <li><a href="${pageContext.request.contextPath }/back/moment-information.jsp">时刻信息</a></li>
              <li><a href="${pageContext.request.contextPath }/back/addmoment.jsp">添加时刻表</a></li>
              <li><a href="${pageContext.request.contextPath }/back/addsite.jsp">添加车次</a></li>  
            </ul>
          </li>
          <li class="sub-menu">
            <a href="javascript:;">
              <i class="fa fa-th"></i>
              <span>站点管理</span>
              </a>
            <ul class="sub">
              <li><a href="${pageContext.request.contextPath }/back/bussite-information.jsp">站点信息</a></li>
              <li><a href="${pageContext.request.contextPath }/back/addbussite.jsp">添加站点</a></li>
              <li><a href="${pageContext.request.contextPath }/back/addbusSites.jsp">新增站点</a></li>
            </ul>
          </li>
    
          <li class="sub-menu">
            <a class="active" href="javascript:;">
              <i class="fa fa-comments-o"></i>
              <span>公告栏管理</span>
              </a>
            <ul class="sub">
              <li class="active"><a href="${pageContext.request.contextPath }/back/announcement.jsp">公告栏信息</a></li>
            </ul>
          </li>
          <li>
             <a href="${pageContext.request.contextPath }/back/baidu_maps.jsp">
              <i class="fa fa-map-marker"></i>
              <span>百度地图</span>
              </a>
          </li>
        </ul>
        <!-- sidebar menu end-->
      </div>
     <!--sidebar start-->
    </aside>
     <!--sidebar end-->
 <!--main content start-->
    <section id="main-content">
      <section class="wrapper site-min-height">
        <!-- page start-->
        <div class="chat-room mt">
          <aside class="mid-side">
            <div class="chat-room-head">
              <h3>用户留言管理<label style="font-size: 14px;margin-left: 10px;">(点击留言标题查看详情)</label></h3>           
              <form action="#" class="pull-right position">
	              <div style="float:left; ">
	                <input type="text" placeholder="输入标题关键字查询" id="keyWord" name="titlekey"
							value="${empty requestScope.titlekey?'':requestScope.titlekey}" class="form-control search-btn ">
				  </div>
				  <div style="float:left; margin-top: 2px;">
	                <input  type="button" id="searchBtn" name="searchBtn" class="form-control" value="搜索"/>	
	              </div>
	              <div style="float:left; margin-top: 2px; ">			
					<input  type="button" id="clearBtn" class="form-control" value="清除"/>
				  </div>
	          </form>
            </div>
            
            
            <div class="room-desk"  id="annListBody">
<%-- 	            <c:forEach items="${requestScope.list }" var="announcement">
	              <div class="room-box">
	                <h5 class="text-primary">标题：<a>${announcement.a_title }</a></h5>
	                <h5 class="text-primary">内容：<a>${announcement.a_content }</a></h5>
	                <h5 class="text-primary">时间：
	                	<a>${announcement.a_time }</a>
	                	<a href="javascript:delFun(${announcement.a_id })" style="float: right;color: red;">删除此留言</a>
	                </h5>
	              </div>
	            </c:forEach> --%>
            </div>
			<!-- 分页信息 -->
				<div id="showPageInfo"></div>
			<!-- 分页实现    -->
				<div class="col-md-12 text-center"><!-- 设置居中 -->
					<ul class="pagination" id="pageItem">
							
					</ul>
				</div>            
            
          </aside>
        </div>
        <!-- page end-->
      </section>
      <!-- /wrapper -->
    </section>
    <!-- /MAIN CONTENT -->
    <!--main content end-->
    <!--footer start-->
    <footer class="site-footer">
      <div class="text-center">
        <p>&copy; Copyrights <strong>Dashio</strong>. All Rights Reserved</p>
        <div class="credits"> Created with Dashio template by <a href="https://templatemag.com/">TemplateMag</a></div>
        <a href="index.jsp#" class="go-top">
          <i class="fa fa-angle-up"></i>
          </a>
      </div>
    </footer>
    <!--footer end-->
  </section>
  <!-- js placed at the end of the document so the pages load faster -->
  <script src="${pageContext.request.contextPath }/lib/jquery/jquery.min.js"></script>

  <script src="${pageContext.request.contextPath }/lib/bootstrap/js/bootstrap.min.js"></script>
  <script class="include" type="text/javascript" src="${pageContext.request.contextPath }/lib/jquery.dcjqaccordion.2.7.js"></script>
  <script src="${pageContext.request.contextPath }/lib/jquery.scrollTo.min.js"></script>
  <script src="${pageContext.request.contextPath }/lib/jquery.nicescroll.js" type="text/javascript"></script>
  <script src="${pageContext.request.contextPath }/lib/jquery.sparkline.js"></script>
  <!--common script for all pages-->
  <script src="${pageContext.request.contextPath }/lib/common-scripts.js"></script> 
  <script type="text/javascript" src="${pageContext.request.contextPath }/lib/gritter/js/jquery.gritter.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/lib/gritter-conf.js"></script>
  <!--script for this page-->
  <script src="${pageContext.request.contextPath }/lib/sparkline-chart.js"></script>
  <script src="${pageContext.request.contextPath }/lib/zabuto_calendar.js"></script>
  
  <script type="text/javascript">
		//声明一个全局变量key
		 var key="";
		$(function(){
			//赋值动作,各种监听事件
			//界面一进来就需要发送ajax请求文章列表
			$.get("${pageContext.request.contextPath }/AnnouncementController",{op:"queryAnnByPage_ajax"},function(result){
				//显示数据写成一个方法,以后就不用在做拼接
				showData(result);
			},"json")
			
			
			//首页
			$(document).on("click",".first",function(){
				//发送ajax请求
				$.get("${pageContext.request.contextPath }/AnnouncementController",{op:"queryAnnByPage_ajax",pageNo:1,pageSize:3,titleKey:key},function(result){
					//显示数据写成一个方法,以后就不用在做拼接
					showData(result);
				},"json")
			});
					
			//末页
			$(document).on("click",".last",function(){
				//获取末页值
				var totalPage=$("#totalPage").text();
				//发送ajax请求
				$.get("${pageContext.request.contextPath }/AnnouncementController",{op:"queryAnnByPage_ajax",pageNo:totalPage,pageSize:3,titleKey:key},function(result){
					//显示数据写成一个方法,以后就不用在做拼接
					showData(result);
				},"json")
			});
			//下一页
			$(document).on("click",".next",function(){
				//获取当前页
				var pageNo=$("#pageNo").text();
				//发送ajax请求
				$.get("${pageContext.request.contextPath }/AnnouncementController",{op:"queryAnnByPage_ajax",pageNo:(parseInt(pageNo)+1),pageSize:3,titleKey:key},function(result){
					//显示数据写成一个方法,以后就不用在做拼接
					showData(result);
				},"json")
			});
			//每一页
			$(document).on("click",".currentPage",function(){
				//获取当前选中的页码
				var pageNo=$(this).text();
				//发送ajax请求
				$.get("${pageContext.request.contextPath }/AnnouncementController",{op:"queryAnnByPage_ajax",pageNo:pageNo,pageSize:3,titleKey:key},function(result){
					//显示数据写成一个方法,以后就不用在做拼接
					showData(result);
				},"json")
			});
			//跳转
			$(document).on("click",".trunto",function(){
				//获取number框的值
				var pageNo=$("#turntoId").val();
				//获取末页值
				var totalPage=$("#totalPage").text();
				if(pageNo<1){
					pageNo=1;
					$("#turntoId").val(pageNo);
				}else if(pageNo > totalPage*1){  //*1 弱类型语言,字符串*1直接转数字
					pageNo=totalPage;
					$("#turntoId").val(pageNo);
				}
				//发送ajax请求
				$.get("${pageContext.request.contextPath }/AnnouncementController",{op:"queryAnnByPage_ajax",pageNo:pageNo,pageSize:3,titleKey:key},function(result){
					//显示数据写成一个方法,以后就不用在做拼接
					showData(result);
				},"json")
			});
			
			//搜索按钮的模糊查询
			$("#searchBtn").click(function(){
				//用户输入的模糊查询关键字
				key=$("#keyWord").val();
				//发送ajax请求  首页
				$.get("${pageContext.request.contextPath }/AnnouncementController",{op:"queryAnnByPage_ajax",pageNo:1,pageSize:3,titlekey:key},function(result){
					//显示数据写成一个方法,以后就不用在做拼接
					showData(result);
				},"json")
			});
			
			//清除按钮实现
			$("#clearBtn").click(function(){
				key="";
				$("#keyWord").val("");
			})
			
			
		})
  		
		function showData(result){
			//1.每一次遍历之前需要清空
			$("#annListBody").empty();
			//2.清空分页的累计
			$("#showPageInfo").empty();
			$("#pageItem").empty();
			//2.显示文章列表数据
			$.each(result.data,function(index,announcement){
				//先把tr标签复制到后端的字符串中,自动转义,复制到text中替换${    与  }
				$("#annListBody").append("<div class=\"room-box\">\r\n" + 
						"	                <h5 class=\"text-primary\">标题：<a href=\"${pageContext.request.contextPath }/AnnouncementController?op=queryAnnDetail&aid="+announcement.a_id +"\">"+announcement.a_title +"</a></h5>\r\n" + 
						"	                <h5 class=\"text-primary\">内容：<a>"+announcement.a_content +"</a></h5>\r\n" + 
						"	                <h5 class=\"text-primary\">时间：\r\n" + 
						"	                	<a>"+announcement.a_time +"</a>\r\n" + 
						"	                	<a href=\"javascript:delFun("+announcement.a_id +")\" style=\"float: right;color: red;\">删除此留言</a>\r\n" + 
						"	                </h5>\r\n" + 
						"	              </div>")
			});
			
			
			//显示分页信息
			$("#showPageInfo").append("&nbsp;&nbsp;&nbsp;&nbsp;当前第<span id='pageNo'>"+result.pageNo+"</span>页/共<span id='totalPage'>"+result.totalPage+
					                  "</span>页/每页显示<span id='pageSize'>"+result.pageSize+"</span>条/共<span id='totalCount'>"+result.totalCount+"</span>条数据");		
		   //首页
		   if(1==result.pageNo){
			   $("#pageItem").append('<li class="disabled"><a href="#">首页</a></li>');
		   }else{
			   $("#pageItem").append('<li><a href="#" class="first">首页</a></li>');
		   }
		   //显示分页栏目
		   for(var i=1;i<=result.totalPage;i++){
			   if(i==result.pageNo){
				   $("#pageItem").append('<li class="active"><a href="#">'+i+'</a></li>');
			   }else{
				   $("#pageItem").append('<li><a href="#" class="currentPage">'+i+'</a></li>');
			   } 
		   }
		   //下一页
		   if(result.pageNo==result.totalPage){
			   $("#pageItem").append('<li class="disabled"><a href="#">下一页</a></li>');
		   }else{
			   $("#pageItem").append('<li><a href="#" class="next">下一页</a></li>');
		   }
		   //末页
		   if(result.pageNo==result.totalPage){
			   $("#pageItem").append('<li class="disabled"><a href="#">末页</a></li>');
		   }else{
			   $("#pageItem").append('<li><a href="#" class="last">末页</a></li>');
		   }
		   //跳转页
		    $("#pageItem").append('<li><a href="#"><input type="number" id="turntoId" value="'+result.pageNo+'" min="1" max="'+result.totalPage+
		    		'" style="width:40px;height:20px"/></a></li>');
		    $("#pageItem").append('<li><a href="#" class="trunto">跳转</a></li>');
		}
  
		//删除
		function delFun(a_id) {
			var flag = confirm("是否确定删除文章编号为:" + a_id);
			if (flag) {
				//发起ajax请求
				$.get("${pageContext.request.contextPath }/AnnouncementController",{op:"delAnn_ajax",a_id:a_id},function(data){
					if(data){
						//刷新数据 发送ajax请求  显示当前改的那一页
						$.get("${pageContext.request.contextPath }/AnnouncementController",
								{
									op:"queryAnnByPage_ajax",
									pageNo:$("#pageNo").text(),//当前页
									pageSize:3,
									titleKey:key
								},function(result){
							//显示数据写成一个方法,以后就不用在做拼接
							showData(result);
						},"json")
					}else{
						alert("删除失败!")
					}
				},"json")
			}
		}
  </script>
</body>

</html>
